===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期：2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110
上一篇文章：使用Application Cache加入離線支援
http://ithelp.ithome.com.tw/question/10160498

隨著時代的進步，使用者的週邊越來越多樣化，觀看您網頁的用戶可能用的是高解析度的電腦螢幕、小螢幕的智慧手機或是寬螢幕的平板，

不同的畫面大小、不同的解析度讓網頁設計師傷透腦筋（如果加上印表功能那就更複雜了）。

如何才能讓每個使用者在不同的週邊（螢幕）上獲得「最佳的瀏覽經驗」呢？

（註解：這個專有名詞稱為RWD，Responsive Web Design。台灣翻譯成自適應網頁設計，
中國翻譯成響應式網頁設計。由Ethan Marcotte於2010新創這個名詞，詳見http://alistapart.com/article/responsive-web-design。）

==== 支援多種規格 ====

想做出一個網頁卻適合各種週邊（螢幕），讓使用者獲得最佳瀏覽經驗，英文稱為one size fit all的網站：

[ul] [li]輸入介面：有些用戶使用電腦，他們的操作模式以「滑鼠、鍵盤」為主，而使用智慧手機與平板的人，則是以「觸控」、「觸控筆」為主。[/li] [li]螢幕解析度：從以前的電腦螢幕1024x768解析度，到目前筆記型電腦常見的1366x768，許多新的大尺寸電視都是Full HD（1920x1080）......。[/li][/ul]

[img=613,532]http://ithelp.ithome.com.tw/upload/images/20141019/201410192144385443c04626065_resize_600.jpg[/img]

[img=613,426]http://ithelp.ithome.com.tw/upload/images/20141019/201410192144575443c05992b8a_resize_600.jpg[/img]

==== 螢幕解析度（Screen Resolution） ====

<meta name="viewport" 
content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

註解：上面的意思就是不允許使用者自行縮放。相關用法如下：
	initial-scale--最小0.25，最大5
	minimum-scale--最小0.25，最大5
	maximum-scale--最小0.25，最大5
	user-scalable--1或 0（true或false）

==== 顯示密度（Display Density）====

[ul] [li]**文字：**對於高解析度的螢幕，將文字（font size）變大。[/li] [li]**影像：**為不同解析度的螢幕，設定同一個影像的不同副本（高解析、低解析等等）。SVG（Scalable Vector Graphics）也是一個好選擇，在縮放影像時有更好的效果。[/li][/ul]

==== 輸入方式 ====

平板與智慧手機很流行的「手指（觸控）輸入」，永遠無法比得上滑鼠的精準度。因此要設計RWD網頁也得慎重考慮使用者的輸入方式。

[ul] [li]**按鈕與超連結：**平板與智慧手機上，按鈕與超連結必需要放大一點，不然的話，觸控螢幕不容易正確點選。[/li] [li]Hovering（滑鼠指標經過的狀態）：滑鼠指標經過超連結，指標的圖案會變成「手指」的狀態。這只有在電影螢幕上比較明顯，平板與手機上較為少見。如何提醒使用者「超連結」，恐怕得花點心思了。[/li] [li]螢幕方向（Screen Orientation，手持方向）：手持式週邊（平板或智慧手機）的螢幕可能是窄而高、或是扁而寬的畫面解析度。這些週邊通常可以自動選轉畫面（可以直拿或是橫拿來改變畫面的水平）。[/li][/ul]

不要走開，馬上回來。

下一篇文章 http://ithelp.ithome.com.tw/question/10160694